<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>暖心商城 - 暖言树洞</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <div class="page">
        <!-- Header -->
        <div class="page-header">
            <h1 class="header-title">暖心商城</h1>
            <div class="flex items-center">
                <div class="currency-badge mr-3">
                    <i class="fas fa-coins mr-1"></i>
                    <span id="userCurrency">128</span>
                </div>
                <button class="header-action" onclick="showCurrencyHelp()">
                    <i class="fas fa-question-circle"></i>
                </button>
            </div>
        </div>

        <!-- Main Content -->
        <div class="page-content">
            <!-- Hero Banner -->
            <div class="card card-gradient mb-6 text-center">
                <div class="mb-4">
                    <div class="text-3xl mb-2">🌟</div>
                    <h2 class="text-lg font-semibold mb-2">用温暖改变世界</h2>
                    <p class="text-sm opacity-90">你的每一枚暖心币都将转化为真实的公益力量</p>
                </div>
                <div class="bg-white bg-opacity-20 rounded-lg p-3">
                    <div class="text-sm opacity-90 mb-1">累计已捐助</div>
                    <div class="text-2xl font-bold">¥12,580</div>
                    <div class="text-xs opacity-75">影响了 3,456 个生命</div>
                </div>
            </div>

            <!-- Categories -->
            <div class="mb-6">
                <h3 class="font-semibold mb-4 flex items-center">
                    <i class="fas fa-th-large mr-2 text-primary"></i>
                    公益分类
                </h3>
                <div class="grid grid-cols-2 gap-3">
                    <button class="category-btn active" onclick="filterCategory('all')">
                        <i class="fas fa-heart text-primary"></i>
                        <span>全部项目</span>
                    </button>
                    <button class="category-btn" onclick="filterCategory('education')">
                        <i class="fas fa-graduation-cap text-info-500"></i>
                        <span>教育助学</span>
                    </button>
                    <button class="category-btn" onclick="filterCategory('environment')">
                        <i class="fas fa-leaf text-success-500"></i>
                        <span>环境保护</span>
                    </button>
                    <button class="category-btn" onclick="filterCategory('poverty')">
                        <i class="fas fa-hands-helping text-warning-500"></i>
                        <span>扶贫济困</span>
                    </button>
                    <button class="category-btn" onclick="filterCategory('medical')">
                        <i class="fas fa-heartbeat text-error-500"></i>
                        <span>医疗救助</span>
                    </button>
                    <button class="category-btn" onclick="filterCategory('elderly')">
                        <i class="fas fa-user-friends text-secondary"></i>
                        <span>关爱老人</span>
                    </button>
                </div>
            </div>

            <!-- Featured Projects -->
            <div class="mb-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="font-semibold flex items-center">
                        <i class="fas fa-star mr-2 text-warning-500"></i>
                        特色项目
                    </h3>
                    <button class="btn-text text-sm">
                        查看全部 <i class="fas fa-chevron-right icon-xs ml-1"></i>
                    </button>
                </div>

                <!-- Project Card 1 -->
                <div class="card card-hover mb-4" data-category="education">
                    <div class="relative mb-4">
                        <img src="https://images.unsplash.com/photo-1497486751825-1233686d5d80?w=400&h=200&fit=crop" 
                             alt="山区儿童图书捐赠" 
                             class="w-full h-32 object-cover rounded-lg">
                        <div class="absolute top-2 left-2 bg-primary-500 text-white px-2 py-1 rounded-full text-xs font-medium">
                            🔥 热门
                        </div>
                        <div class="absolute top-2 right-2 bg-black bg-opacity-50 text-white px-2 py-1 rounded-full text-xs">
                            78% 完成
                        </div>
                    </div>
                    <h4 class="font-semibold mb-2">山区儿童图书捐赠</h4>
                    <p class="text-sm text-neutral-600 mb-3 leading-relaxed">
                        为偏远山区的孩子们送去知识的力量，让每个孩子都能享受阅读的快乐。已覆盖15个村庄，受益儿童超过500人。
                    </p>
                    <div class="flex items-center justify-between mb-3">
                        <div class="text-sm text-neutral-500">希望教育基金会</div>
                        <div class="flex items-center text-xs text-neutral-500">
                            <i class="fas fa-users mr-1"></i>
                            <span>156人参与</span>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="flex items-center justify-between text-sm mb-1">
                            <span class="text-neutral-600">筹集进度</span>
                            <span class="font-medium">¥7,800 / ¥10,000</span>
                        </div>
                        <div class="w-full bg-neutral-200 rounded-full h-2">
                            <div class="bg-gradient-to-r from-primary-500 to-secondary-500 h-2 rounded-full" style="width: 78%;"></div>
                        </div>
                    </div>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center text-primary font-semibold">
                            <i class="fas fa-coins mr-1"></i>
                            <span>50 暖心币</span>
                        </div>
                        <button onclick="participateProject('charity001')" class="btn btn-primary btn-sm">
                            <i class="fas fa-heart mr-1"></i>
                            立即参与
                        </button>
                    </div>
                </div>

                <!-- Project Card 2 -->
                <div class="card card-hover mb-4" data-category="elderly">
                    <div class="relative mb-4">
                        <img src="https://images.unsplash.com/photo-1559827260-dc66d52bef19?w=400&h=200&fit=crop" 
                             alt="老人院暖心陪伴" 
                             class="w-full h-32 object-cover rounded-lg">
                        <div class="absolute top-2 left-2 bg-success-500 text-white px-2 py-1 rounded-full text-xs font-medium">
                            ✨ 即将完成
                        </div>
                        <div class="absolute top-2 right-2 bg-black bg-opacity-50 text-white px-2 py-1 rounded-full text-xs">
                            92% 完成
                        </div>
                    </div>
                    <h4 class="font-semibold mb-2">老人院暖心陪伴</h4>
                    <p class="text-sm text-neutral-600 mb-3 leading-relaxed">
                        用温暖的陪伴让孤独的老人感受到社会的关爱，传递人间真情。定期组织志愿者活动和节日慰问。
                    </p>
                    <div class="flex items-center justify-between mb-3">
                        <div class="text-sm text-neutral-500">夕阳红公益协会</div>
                        <div class="flex items-center text-xs text-neutral-500">
                            <i class="fas fa-users mr-1"></i>
                            <span>203人参与</span>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="flex items-center justify-between text-sm mb-1">
                            <span class="text-neutral-600">筹集进度</span>
                            <span class="font-medium">¥4,600 / ¥5,000</span>
                        </div>
                        <div class="w-full bg-neutral-200 rounded-full h-2">
                            <div class="bg-gradient-to-r from-secondary-500 to-warning-500 h-2 rounded-full" style="width: 92%;"></div>
                        </div>
                    </div>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center text-primary font-semibold">
                            <i class="fas fa-coins mr-1"></i>
                            <span>30 暖心币</span>
                        </div>
                        <button onclick="participateProject('charity002')" class="btn btn-primary btn-sm">
                            <i class="fas fa-heart mr-1"></i>
                            立即参与
                        </button>
                    </div>
                </div>

                <!-- Project Card 3 -->
                <div class="card card-hover mb-4" data-category="environment">
                    <div class="relative mb-4">
                        <img src="https://images.unsplash.com/photo-1542601906990-b4d3fb778b09?w=400&h=200&fit=crop" 
                             alt="海洋清洁行动" 
                             class="w-full h-32 object-cover rounded-lg">
                        <div class="absolute top-2 left-2 bg-info-500 text-white px-2 py-1 rounded-full text-xs font-medium">
                            🌊 新项目
                        </div>
                        <div class="absolute top-2 right-2 bg-black bg-opacity-50 text-white px-2 py-1 rounded-full text-xs">
                            23% 完成
                        </div>
                    </div>
                    <h4 class="font-semibold mb-2">海洋清洁行动</h4>
                    <p class="text-sm text-neutral-600 mb-3 leading-relaxed">
                        保护海洋生态环境，清理海洋垃圾，为子孙后代留下一片蔚蓝。每月组织志愿者清洁海滩活动。
                    </p>
                    <div class="flex items-center justify-between mb-3">
                        <div class="text-sm text-neutral-500">蓝色海洋基金会</div>
                        <div class="flex items-center text-xs text-neutral-500">
                            <i class="fas fa-users mr-1"></i>
                            <span>89人参与</span>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="flex items-center justify-between text-sm mb-1">
                            <span class="text-neutral-600">筹集进度</span>
                            <span class="font-medium">¥2,300 / ¥10,000</span>
                        </div>
                        <div class="w-full bg-neutral-200 rounded-full h-2">
                            <div class="bg-gradient-to-r from-info-500 to-success-500 h-2 rounded-full" style="width: 23%;"></div>
                        </div>
                    </div>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center text-primary font-semibold">
                            <i class="fas fa-coins mr-1"></i>
                            <span>40 暖心币</span>
                        </div>
                        <button onclick="participateProject('charity003')" class="btn btn-primary btn-sm">
                            <i class="fas fa-heart mr-1"></i>
                            立即参与
                        </button>
                    </div>
                </div>
            </div>

            <!-- My Contributions -->
            <div class="card mb-6">
                <h3 class="font-semibold mb-4 flex items-center">
                    <i class="fas fa-history mr-2 text-primary"></i>
                    我的公益记录
                </h3>
                <div class="space-y-3">
                    <div class="flex items-center justify-between py-2 border-b border-neutral-100">
                        <div class="flex items-center">
                            <div class="w-8 h-8 bg-primary-100 rounded-lg flex items-center justify-center mr-3">
                                <i class="fas fa-graduation-cap text-primary text-xs"></i>
                            </div>
                            <div>
                                <div class="text-sm font-medium">山区儿童图书捐赠</div>
                                <div class="text-xs text-neutral-500">昨天 15:30</div>
                            </div>
                        </div>
                        <div class="text-right">
                            <div class="text-sm font-medium text-error-500">-50 币</div>
                            <div class="text-xs text-success-500">已生效</div>
                        </div>
                    </div>
                    
                    <div class="flex items-center justify-between py-2 border-b border-neutral-100">
                        <div class="flex items-center">
                            <div class="w-8 h-8 bg-secondary-100 rounded-lg flex items-center justify-center mr-3">
                                <i class="fas fa-user-friends text-secondary text-xs"></i>
                            </div>
                            <div>
                                <div class="text-sm font-medium">老人院暖心陪伴</div>
                                <div class="text-xs text-neutral-500">3天前 10:20</div>
                            </div>
                        </div>
                        <div class="text-right">
                            <div class="text-sm font-medium text-error-500">-30 币</div>
                            <div class="text-xs text-success-500">已生效</div>
                        </div>
                    </div>
                    
                    <div class="flex items-center justify-between py-2">
                        <div class="flex items-center">
                            <div class="w-8 h-8 bg-warning-100 rounded-lg flex items-center justify-center mr-3">
                                <i class="fas fa-hands-helping text-warning-500 text-xs"></i>
                            </div>
                            <div>
                                <div class="text-sm font-medium">贫困儿童营养计划</div>
                                <div class="text-xs text-neutral-500">1周前 14:15</div>
                            </div>
                        </div>
                        <div class="text-right">
                            <div class="text-sm font-medium text-error-500">-25 币</div>
                            <div class="text-xs text-success-500">已生效</div>
                        </div>
                    </div>
                </div>
                
                <button class="btn-text w-full mt-4">
                    查看完整记录 <i class="fas fa-chevron-right icon-xs ml-1"></i>
                </button>
            </div>

            <!-- Impact Summary -->
            <div class="card bg-gradient-to-r from-success-50 to-info-50">
                <h3 class="font-semibold mb-4 flex items-center">
                    <i class="fas fa-chart-line mr-2 text-success-500"></i>
                    我的公益影响
                </h3>
                <div class="grid grid-cols-2 gap-4">
                    <div class="text-center">
                        <div class="text-2xl font-bold text-success-500 mb-1">105</div>
                        <div class="text-xs text-neutral-600">累计捐助暖心币</div>
                    </div>
                    <div class="text-center">
                        <div class="text-2xl font-bold text-info-500 mb-1">3</div>
                        <div class="text-xs text-neutral-600">参与公益项目</div>
                    </div>
                    <div class="text-center">
                        <div class="text-2xl font-bold text-warning-500 mb-1">¥210</div>
                        <div class="text-xs text-neutral-600">等值人民币</div>
                    </div>
                    <div class="text-center">
                        <div class="text-2xl font-bold text-primary mb-1">45</div>
                        <div class="text-xs text-neutral-600">公益影响力</div>
                    </div>
                </div>
                <div class="mt-4 p-3 bg-white bg-opacity-70 rounded-lg">
                    <div class="text-sm text-center text-neutral-700">
                        🌟 你的善举已经影响了 <span class="font-semibold text-primary">23个生命</span>
                    </div>
                    <div class="text-xs text-center text-neutral-500 mt-1">
                        感谢你为世界带来温暖！
                    </div>
                </div>
            </div>
        </div>

        <!-- Bottom Navigation -->
        <div class="bottom-nav">
            <a href="home.html" class="nav-item" data-page="home">
                <i class="fas fa-home nav-icon"></i>
                <span class="nav-label">树洞</span>
            </a>
            <a href="drift.html" class="nav-item" data-page="drift">
                <i class="fas fa-compass nav-icon"></i>
                <span class="nav-label">漂流</span>
            </a>
            <a href="profile.html" class="nav-item" data-page="profile">
                <i class="fas fa-heart nav-icon"></i>
                <span class="nav-label">暖心</span>
            </a>
            <a href="store.html" class="nav-item active" data-page="store">
                <i class="fas fa-gift nav-icon"></i>
                <span class="nav-label">商城</span>
            </a>
        </div>
    </div>

    <script src="js/app.js"></script>
    <script>
        // 商城页面管理器
        class StorePageManager {
            constructor() {
                this.currentCategory = 'all';
                this.init();
            }

            init() {
                this.loadUserCurrency();
                this.initAnimations();
                this.bindEvents();
            }

            loadUserCurrency() {
                if (window.App && App.data.user) {
                    const currencyElement = document.getElementById('userCurrency');
                    if (currencyElement) {
                        currencyElement.textContent = App.data.user.currency;
                    }
                }
            }

            initAnimations() {
                const cards = document.querySelectorAll('.card');
                cards.forEach((card, index) => {
                    setTimeout(() => {
                        card.style.animation = 'fadeInUp 0.5s ease forwards';
                    }, index * 100);
                });
            }

            bindEvents() {
                // 绑定分类按钮事件
                const categoryBtns = document.querySelectorAll('.category-btn');
                categoryBtns.forEach(btn => {
                    btn.addEventListener('click', (e) => {
                        e.preventDefault();
                        // 这个事件由onclick属性处理
                    });
                });
            }

            filterByCategory(category) {
                this.currentCategory = category;
                
                // 更新分类按钮状态
                const categoryBtns = document.querySelectorAll('.category-btn');
                categoryBtns.forEach(btn => {
                    btn.classList.remove('active');
                });
                event.target.closest('.category-btn').classList.add('active');
                
                // 过滤项目卡片
                const projectCards = document.querySelectorAll('[data-category]');
                projectCards.forEach(card => {
                    if (category === 'all' || card.dataset.category === category) {
                        card.style.display = 'block';
                        card.style.animation = 'fadeIn 0.3s ease';
                    } else {
                        card.style.display = 'none';
                    }
                });
                
                App.utils.showToast(`已筛选${this.getCategoryName(category)}项目`, 'info');
            }

            getCategoryName(category) {
                const names = {
                    'all': '全部',
                    'education': '教育助学',
                    'environment': '环境保护',
                    'poverty': '扶贫济困',
                    'medical': '医疗救助',
                    'elderly': '关爱老人'
                };
                return names[category] || '全部';
            }

            participateInProject(projectId) {
                // 获取项目信息
                const projects = {
                    'charity001': { name: '山区儿童图书捐赠', cost: 50 },
                    'charity002': { name: '老人院暖心陪伴', cost: 30 },
                    'charity003': { name: '海洋清洁行动', cost: 40 }
                };
                
                const project = projects[projectId];
                if (!project) return;
                
                const userCurrency = App.data.user.currency;
                
                if (userCurrency < project.cost) {
                    App.utils.showToast(`暖心币不足，还需要 ${project.cost - userCurrency} 枚`, 'warning');
                    return;
                }
                
                // 确认参与
                const confirmed = confirm(`确定要参与「${project.name}」项目吗？\n需要消耗 ${project.cost} 枚暖心币`);
                if (!confirmed) return;
                
                // 扣除暖心币
                App.data.user.currency -= project.cost;
                App.data.user.stats.charityValue += project.cost;
                
                // 更新显示
                document.getElementById('userCurrency').textContent = App.data.user.currency;
                
                // 显示成功消息
                App.utils.showToast(`成功参与「${project.name}」！谢谢你的善心 ❤️`, 'success');
                
                // 跳转到项目详情页面
                setTimeout(() => {
                    window.location.href = `project-detail.html?id=${projectId}`;
                }, 1500);
            }
        }

        // 全局函数
        function filterCategory(category) {
            if (window.storeManager) {
                storeManager.filterByCategory(category);
            }
        }

        function participateProject(projectId) {
            if (window.storeManager) {
                storeManager.participateInProject(projectId);
            }
        }

        function showCurrencyHelp() {
            const helpText = `💡 暖心币使用说明：
            
• 暖心币是做公益的专用货币
• 1暖心币 ≈ ¥2人民币公益价值
• 通过发布日记、点评互动获得
• 只能用于参与公益项目
• 所有捐助都有透明记录

你的每一枚暖心币都会转化为真实的公益力量！`;

            alert(helpText);
        }

        // 页面初始化
        let storeManager;
        
        document.addEventListener('DOMContentLoaded', function() {
            storeManager = new StorePageManager();
        });
    </script>

    <style>
        /* 分类按钮样式 */
        .category-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: var(--spacing-3);
            background: white;
            border: 1px solid var(--neutral-200);
            border-radius: var(--rounded-lg);
            transition: all var(--transition-normal);
            cursor: pointer;
            text-align: center;
        }

        .category-btn:hover {
            border-color: var(--primary-300);
            background: var(--primary-50);
        }

        .category-btn.active {
            border-color: var(--primary-500);
            background: var(--primary-50);
        }

        .category-btn i {
            font-size: 1.25rem;
            margin-bottom: 0.5rem;
        }

        .category-btn span {
            font-size: 0.75rem;
            font-weight: 500;
        }

        /* 网格布局 */
        .grid {
            display: grid;
        }

        .grid-cols-2 {
            grid-template-columns: repeat(2, 1fr);
        }

        /* 图片样式 */
        .w-full {
            width: 100%;
        }

        .h-32 {
            height: 8rem;
        }

        .object-cover {
            object-fit: cover;
        }

        /* 定位 */
        .relative {
            position: relative;
        }

        .absolute {
            position: absolute;
        }

        .top-2 {
            top: 0.5rem;
        }

        .left-2 {
            left: 0.5rem;
        }

        .right-2 {
            right: 0.5rem;
        }

        /* 间距 */
        .space-y-3 > * + * {
            margin-top: 0.75rem;
        }

        /* 渐变背景 */
        .bg-gradient-to-r {
            background-image: linear-gradient(to right, var(--bg-start), var(--bg-end));
        }

        .from-primary-500 {
            --bg-start: var(--primary-500);
        }

        .to-secondary-500 {
            --bg-end: var(--secondary-500);
        }

        .from-secondary-500 {
            --bg-start: var(--secondary-500);
        }

        .to-warning-500 {
            --bg-end: var(--warning-500);
        }

        .from-info-500 {
            --bg-start: var(--info-500);
        }

        .to-success-500 {
            --bg-end: var(--success-500);
        }

        .from-success-50 {
            --bg-start: var(--success-50);
        }

        .to-info-50 {
            --bg-end: var(--info-50);
        }

        /* 背景透明度 */
        .bg-opacity-20 {
            background-color: rgba(255, 255, 255, 0.2);
        }

        .bg-opacity-50 {
            background-color: rgba(0, 0, 0, 0.5);
        }

        .bg-opacity-70 {
            background-color: rgba(255, 255, 255, 0.7);
        }

        /* 响应式调整 */
        @media (max-width: 640px) {
            .grid-cols-2 {
                gap: 0.5rem;
            }
            
            .category-btn {
                padding: 0.5rem;
            }
            
            .category-btn i {
                font-size: 1rem;
                margin-bottom: 0.25rem;
            }
            
            .category-btn span {
                font-size: 0.625rem;
            }
            
            .h-32 {
                height: 6rem;
            }
        }
    </style>
</body>
</html>
